<template>
  <view class="" hover-class="none" hover-stop-propagation="false">
    <view class="custom-sticky">
      <u-sticky bgColor="#fff" class="custom-sticky">
        <u-tabs
          :list="tabList"
          :scrollable="false"
          itemStyle="height: 34px;flex:1"
          lineHeight="6rpx"
          lineWidth="60rpx"
          @click="tabChange"
          :current="current"
        ></u-tabs>
      </u-sticky>
    </view>
    <view>
      <view v-for="(item, index) in list" :key="index" class="nav" @tap="getDetail">
        <view class="acea-row row-between goods-total">
          <text class="title">{{ current === 0 ? '药房消息' : '咨询回复' }}</text>
          <text class="num">2023-02-01</text>
        </view>
        <view class="content"> 这里展示的是咨询的内容 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { list } from '@/api/demo'
import { mixinGetList } from '@/utils/mixins'
export default {
  mixins: [mixinGetList],
  data() {
    return {
      current: 0,
      tabList: [
        {
          name: '消息',
          type: 0,
          badge: {
            isDot: true
          }
        },
        {
          name: '咨询',
          type: 1,
          badge: {
            value: 5
          }
        }
      ]
    }
  },
  onLoad(option) {
    this.current = option.type || 0
  },
  methods: {
    tabChange({ type }) {
      console.log(type)
      this.current = type
      this.getList(true)
    },
    getList(isRefresh) {
      uni.showLoading({ title: '数据加载中...' })
      list({
        type: this.current,
        ...this.pageOption
      })
        .then((res) => {
          this.mixinFormatRes(
            res,
            (v) => ({
              ...v,
              imgUrl: v.img // 主要是格式化列表字段，比如时间、图片链接、转换的统一处理
            }),
            isRefresh
          )
        })
        .finally(() => {
          uni.hideLoading()
          uni.stopPullDownRefresh()
        })
    },
    phoneCall() {
      uni.makePhoneCall({
        phoneNumber: '123123213'
      })
    },
    getDetail() {
      if (this.current === 1) {
        uni.navigateTo({
          url: '/homePages/message/detail'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-sticky {
  padding: 10rpx 0;
}
.nav {
  margin: 20rpx auto 40rpx auto;
  display: flex;
  flex-direction: column;
  padding: 20rpx 20rpx;
  box-shadow: 0px 0px 4px 0px rgba(242, 117, 96, 0.1);
  border-radius: 20rpx;
  background-color: #fff;
  width: 675rpx;
  .goods-total {
    margin: 20upx 0;
    line-height: 25upx;
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 26upx;
      color: #333333;
    }

    .num {
      font-size: 26upx;
      color: #999999;
    }
  }
  .content {
    font-size: 26upx;
    color: #999999;
    width: 100%;
    overflow-wrap: break-word;
    /*就是下面这一句，好像网上没有这一个的说明，但是浏览器都支持*/
    word-break: break-word;
    word-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    /*autoprefixer: off;*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //设置几行
  }
}
</style>
